<template>
    <div class="nav">
        <el-col :span="12">
            <el-menu active-text-color="#409eff" background-color="#314158" class="el-menu-vertical-demo"
                default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" unique-opened  router>
                <el-menu-item index="2">
                    <i class="homepage"></i>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu :index="`/${p.name}`" v-for="p in userStore.activeMenus" :key="p.id">
                    <template #title>
                        <i class="iconfont" :class="p.icon"></i>
                        <span>{{ p.title }}</span>
                    </template>

                    <el-menu-item :index="`/${p.name}/${sub.name}`" v-for="sub in p.children" :key="sub.id">
                        <i class="iconfont" :class="sub.icon"></i>
                        <span> {{ sub.title }}</span>
                    </el-menu-item>

                </el-sub-menu>



            </el-menu>
        </el-col>

    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "../../store";


import {

    Location,

} from '@element-plus/icons-vue'

let userStore = useUserStore()
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
// setTimeout(() => {
//     console.log(userStore.activeMenus);


// })

</script>

<style lang="less" scoped>
::v-deep(.el-sub-menu) {
    width: 250px;
}
</style>